<template>
<div>
  <el-button @click="add">新增</el-button>

  <el-table
      :data="list"
      border
      style="width: 100%">
    <el-table-column
        prop="id"
        width="180"
        label="角色ID">
    </el-table-column>
    <el-table-column
        width="180"
        prop="roleName"
        label="角色名称">
    </el-table-column>
    <el-table-column
        prop="roleCode"
        width="180"
        label="角色编码">
    </el-table-column>
    <el-table-column
        prop="roleDesc"
        width="180"
        label="角色描述">
    </el-table-column>
    <el-table-column
        prop="roleDesc"
        width="200"
        label="状态">
      <template slot-scope="{ row }">
        <el-switch
            :active-value="0"
            :inactive-value="1"
            :active-text="row.deleted===0?'已开启':'已禁用'"
            @change="deletedChange($event,row.id)"
            v-model="row.deleted">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
        label="操作">
      <template slot-scope="{ row }">
        <el-button size="mini" @click="edit(row)" type="success">
          编 辑
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog @close="closeDialog" :title="title" :visible.sync="dialogVisible">
    <el-form ref="form" :rules="rules" :model="form">
      <el-form-item prop="roleName" label="角色名称" label-width="80px">
        <el-input v-model="form.roleName"></el-input>
      </el-form-item>
      <el-form-item prop="roleCode" label="角色编码" label-width="80px">
        <el-input v-model="form.roleCode"></el-input>
      </el-form-item>
      <el-form-item prop="roleDesc" label="角色描述"  label-width="80px">
        <el-input
            resize="none"
            type="textarea"
            v-model="form.roleDesc" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { deepClone } from "../../ulits";
import { getRole,changeRole,updateRole } from '@/api'
const obj = {
  required:true,
  message:"请输入必填项",
  trigger: 'blur'
}
export default {
  name: "admin",
  data() {
    return {
      list:[],
      dialogVisible:false,
      form:{
        roleCode: "",
        roleDesc: "",
        roleName: "",
      },
      title:"新增角色",
      rules:{
        roleName:[obj],
        roleCode:[obj],
        roleDesc:[obj]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList(){
      const res = await getRole()
      console.log(res)
      this.list = res.data.data
    },
    closeDialog(){
      this.$refs.form.resetFields()
    },
    edit(row){
      this.title = "编辑角色"
      this.form = deepClone(row) // 深拷贝
      this.dialogVisible = true
    },
    add(){
      this.title = "新增角色"
      this.dialogVisible = true

    },
    submit(){
      this.$refs.form.validate(async (validate)=>{
        if (validate){
          if (this.title==='新增角色'){
            console.log('新增角色')
          }else {
            console.log(this.form)
            const res = await updateRole(this.form)
            console.log(res)
          }
        }
      })
    },
    async deletedChange(deleted,roleId){
      const res = await changeRole({
        deleted,
        roleId
      })
      this.$message.success(res.data.msg)
      console.log(res)
    }
  }
}
</script>

<style scoped>

</style>
